<template>
    <div class="article_details_recommend_box outer_shadows">
        <p class="article_details_recommend_header">
           <slot name="title"></slot>
        </p>
        <ul>
            <li v-for="(item,index) in dataList.list" :key="index" :style="{'--delay': index*0.2+'s'}">
                <router-link :to="'/articleDetails?id='+item.id" target="_blank">{{item.title}}</router-link>
                <p>{{format.n_format(item.visit)}}人•阅读过</p>
            </li>
        </ul>

    </div>
</template>
<!--精选推荐-->
<script setup>
import format from "@/config/methods/digital.js";

//数据内容列表
const dataList = defineProps({
    list: Array
})


</script>

<style scoped>
.article_details_recommend_box {
    width: 100%;
    box-shadow: 0 0 3px rgba(96, 97, 98, 0.12);
}

.article_details_recommend_header {
    background: linear-gradient(90deg, rgba(176, 194, 213, 0.45), #60a7f1);
    font-size: 16px;
    font-weight: bolder;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
}
ul{
    list-style: none;
    padding: 5px 10px;
}
li{
    height: 50px;
    margin: 7px 0;
    animation: article_details_recommend_box_li .2s ease-out 0s 1 forwards;
    animation-delay: var(--delay);
    opacity: 0;
}
@keyframes article_details_recommend_box_li {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
a{
    display: inline-block;
    width: 100%;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
}
p{
    font-size: 13px;
    height: 20px;
    line-height: 20px;
}
</style>